<template>
    <div class="page animate__animated animate__fadeIn">
        <section class="statistics-wrap">
            <!-- 数据展示（用户量，订单量，销售额，其他（商品数量，供应商数量，司机数量）） -->
            <el-row :gutter="12">
                <!-- <el-col :lg="6" :md="12" :sm="12">
                    <div class="grid-content">
                        <div class="grid-content-header">
                            <h1>用户数据</h1>
                            <el-tag effect="dark" type="danger" size="small">今日</el-tag>
                        </div>
                        <div class="grid-content-body">
                            <h2>{{ statisticsData.userRegToday ? statisticsData.userRegToday :0 }}</h2>
                            <p>昨日 <i class="el-icon-right"></i> {{ statisticsData.userRegYesterday }}</p>
                        </div>
                        <div class="grid-content-footer">
                            <p>网站用户数</p>
                            <p>{{ statisticsData.userRegTotal ? statisticsData.userRegTotal :0 }}人</p>
                        </div>
                    </div>
                </el-col> -->
                <el-col :lg="8" :md="8" :sm="8">
                    <div class="grid-content">
                        <div class="grid-content-header">
                            <h1>订单数据</h1>
                            <el-tag effect="dark" type="danger" size="small">今日</el-tag>
                        </div>
                        <div class="grid-content-body">
                            <h2>{{ statisticsData.orderCountToday ? statisticsData.orderCountToday :0 }}</h2>
                            <p>昨日 <i class="el-icon-right"></i> {{ statisticsData.orderCountYesterday ? statisticsData.orderCountYesterday :0 }}</p>
                        </div>
                        <div class="grid-content-footer">
                            <p>网站订单量</p>
                            <p>{{ statisticsData.orderCountTotal ?  statisticsData.orderCountTotal :0 }}单</p>
                        </div>
                    </div>
                </el-col>
                <el-col :lg="8" :md="8" :sm="8">
                    <div class="grid-content">
                        <div class="grid-content-header">
                            <h1>销售数据</h1>
                            <el-tag effect="dark" type="danger" size="small">今日</el-tag>
                        </div>
                        <div class="grid-content-body">
                            <h2>{{ statisticsData.orderSumToday ? statisticsData.orderSumToday : 0 }}</h2>
                            <p>昨日 <i class="el-icon-right"></i> {{ statisticsData.orderSumYesterday ? statisticsData.orderSumYesterday : 0 }}</p>
                        </div>
                        <div class="grid-content-footer">
                            <p>网站销售额</p>
                            <p>{{ statisticsData.orderSumTotal ? statisticsData.orderSumTotal : 0}}元</p>
                        </div>
                    </div>
                </el-col>
                <el-col :lg="8" :md="8" :sm="8">
                    <div class="grid-content">
                        <div class="grid-content-header">
                            <h1>其他</h1>
                            <el-tag effect="dark" type="info" size="small">总</el-tag>
                        </div>
                        <div class="else-num-body">
                            <div class="else-num-wrap">
                                <div class="left">
                                    <img src='../../assets/img/goods.png' />
                                    <p>商品数量</p>
                                </div>
                                <p class="right">{{ statisticsData.goodsCount }}</p>
                            </div>
                            <!-- <div class="else-num-wrap">
                                <div class="left">
                                    <img src='../../assets/img/supplier.png' />
                                    <p>供应商数量</p>
                                </div>
                                <p class="right">{{ statisticsData.supplyCount }}</p>
                            </div> -->
                            <div class="else-num-wrap">
                                <div class="left">
                                    <img src='../../assets/img/siji.png' />
                                    <p>司机数量</p>
                                </div>
                                <p class="right">{{ statisticsData.driverCount }}</p>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </section>
        <!-- 交易统计 -->
        <section class="statistics-wrap">
            <el-row :gutter="12">
                <el-col :span="24">
                    <div class="grid-content statistics-content">
                        <div class="grid-content-header">
                            <div class="statistics-header">
                                <div class="statistics-header-icon">
                                    <i class="el-icon-s-marketing"></i>
                                </div>
                                <p>交易统计(折线图)</p>
                            </div>
                            <el-radio-group v-model="orderValue" size="small" class="radios-wrap" @input="switchOrder">
                                <el-radio-button label="1">日</el-radio-button>
                                <el-radio-button label="2">周</el-radio-button>
                                <el-radio-button label="3">月</el-radio-button>
                            </el-radio-group>
                        </div>
                        <div class="charts-con">
                            <div class="cavasbox" id="orderLineChart"></div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </section>
    </div>
</template>
<script>
import * as echarts from 'echarts';
import { userStat, orderTotalStat, otherStat } from '../../api/menu';
export default {
    name: "welcome",
    data() {
        return {
            statisticsData: {},
            //订单数据
            orderValue: 1,
            orderLineOption: {
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    data: ['交易量', '交易总金额']
                },
                xAxis: {
                    type: 'category',
                    data: [],
                    axisLabel: {
                        rotate: 20, // 旋转标签，防止重叠
                        margin: 20   // 标签与轴线之间的距离
                    },
                },
                yAxis: [
                    {
                        type: 'value',
                        name: "交易量",
                        axisLabel: {
                            formatter: "{value}"
                        },
                    },
                    {
                        type: 'value',
                        name: "交易总金额",
                        axisLabel: {
                            formatter: "{value}元"
                        },
                    }
                ],
                series: [
                    {
                        name: '交易量',
                        type: 'line',
                        data: [],
                        itemStyle: {
                            normal: {
                                color: '#2062E6',//折线的颜色
                                borderColor: '#2062E6',  //拐点边框颜色
                            }
                        },

                    },
                    {
                        name: '交易总金额',
                        type: 'line',
                        yAxisIndex: 1,
                        data: [],
                        itemStyle: {
                            normal: {
                                color: '#2BC17B',//折线的颜色
                                borderColor: '#2BC17B',  //拐点边框颜色
                            }
                        },
                    },
                ],
            },
        }
    },
    // 导入组件
    components: {
        // 点聚合组件
    },
    // 创建完毕状态(里面是操作)
    created() { },
    // 挂载结束状态(里面是操作)
    mounted() {
        this.$nextTick(() => {
            this.loadStatistics()
            this.getOrderChart()
        })
    },
    // 里面的函数只有调用才会执行
    methods: {
        loadStatistics() {
            otherStat().then(res => {
                if (res.code == 0) {
                    this.statisticsData = res.data;
                }
            })
        },
        /*
            *订单交易数据展示
            *getOrderChart() 获取用户分布图
            *switchOrder() 切换
        */
        getOrderChart() {
            const that = this;
            orderTotalStat({
                timeType: that.orderValue
            }).then(res => {
                if (res.code == 0) {
                    //折线图
                    that.orderLineOption.xAxis.data = res.data.curve_chart.time;
                    that.orderLineOption.series[0].data = res.data.curve_chart.count;
                    that.orderLineOption.series[1].data = res.data.curve_chart.price;
                    var orderLineChartHtml = document.getElementById('orderLineChart');
                    var orderLineChart = echarts.init(orderLineChartHtml);
                    that.orderLineOption && orderLineChart.setOption(that.orderLineOption);
                    window.addEventListener('resize', function () {
                        orderLineChart.resize();
                    });
                }
            })

        },
        switchOrder(e) {
            this.orderValue = e;
            this.orderLineOption.xAxis.data = [];
            this.orderLineOption.series[0].data = [];
            this.orderLineOption.series[1].data = [];
            this.getOrderChart();
        },
    }
};
</script>
<style scoped>
.grid-content {
    width: 100%;
    min-height: 200px;
    padding: 12px 20px 12px;
    background: #ffffff;
    border-radius: 6px;
    box-sizing: border-box;
    margin-bottom: 12px;
}
.statistics-content{
    height: 476px;
}
.grid-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.grid-content-header h1 {
    font-size: 14px;
    position: relative;
    padding-left: 8px;
}
.grid-content-header h1:before {
    content: "";
    width: 3px;
    height: 14px;
    background: var(--main-color);
    position: absolute;
    left: 0;
    top: 3px;
    margin: auto;
    border-radius: 2px;
}
.statistics-header {
    font-size: 14px;
    position: relative;
    display: flex;
    align-items: center;
}
.statistics-header p {
    font-weight: bold;
}
.statistics-header-icon {
    width: 28px;
    height: 28px;
    background: rgba(36, 115, 244, 0.1);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}
.icon {
    width: 16px;
    height: 16px;
}
.statistics-header-icon i {
    color: var(--main-color);
    font-size: 16px;
}
.grid-content-body {
    margin-top: 26px;
    padding-bottom: 16px;
    border-bottom: 1px solid #dcdfe6;
}
.grid-content-body h2 {
    font-size: 36px;
    font-weight: normal;
    text-align: left;
    font-family: 'DIN-BOLD';
}
.grid-content-body p {
    font-size: 14px;
    color: #606266;
    padding-top: 10px;
}
.grid-content-footer {
    color: #909399;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding-top: 12px;
}
.else-num-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    margin-top: 30px;
}
.else-num-wrap .left {
    display: flex;
    align-items: center;
}
.else-num-wrap .left p {
    padding-left: 10px;
    color: #606266;
}
.else-num-wrap img {
    width: 36px;
    height: 36px;
}
.else-num-wrap .right {
    font-weight: bold;
    font-size: 16px;
    color: #606266;
    font-family: 'DIN-BOLD';
}
.else-num-wrap .right p {
    margin-bottom: 5px;
}
.else-num-wrap .right span {
    font-size: 18px;
}
.statisics-num-wrap {
    display: flex;
    justify-content: space-between;
}
.pie-wrap {
    margin-top: 20px;
}
.charts-con {
    width: 100%;
    height: 400px;
    margin-top: 20px;
}
.cavasbox {
    width: 100%;
    height: 400px;
    box-sizing: border-box;
}
.top-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.top-title h2 {
    font-size: 12px;
    font-weight: normal;
}
.radios-wrap {
}
/deep/ .el-col {
    /* margin-bottom: 15px; */
}
</style>